<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>注册页</title>
		<!-- 1.引入重置样式表 -->
		<link rel="stylesheet" href="../css/reset.css" />
		<!-- 2.引入常态化样式表 -->
		<link rel="stylesheet" href="../css/normalize.css" />
		<!-- 3.引入公共样式 -->
		<link rel="stylesheet" href="../css/common.css" />
		<!-- 4.引入当前页样式 -->
		<link rel="stylesheet" href="../css/register.css" />
		<link rel="stylesheet" href="../css/api-snakeBtn.css" />
	</head>
	<body>
		<header class="b-box">
			<div class="flex-c-sb container-register">
				<!-- 
				logo
				1.img直接写logo
				2.支持SEO 在a标签中套一个h1标签，然后给h1
				增加背景图
			 -->
				<a href="#">
					<h1></h1>
				</a>
				<p>
					<span>已有源码账号,</span><a href="../html/login.html">立即登录</a>
				</p>
			</div>
		</header>
		<main>
			<!-- 白色框 -->
			<div id="bigBox">
				<!-- 注册框 -->
				<div id="register-box">
					<h1>欢迎注册</h1>
					<h2>百款接口免费试用</h2>
					<p class="gift">
						<img src="../imgs/reg-gift.png" alt="" width="12" />
						<span>注册即送300元大礼包</span>
					</p>
					<form action="#">
						<div class="un">
							<input
								type="text"
								class="on"
								placeholder="用户名（6~20位字母数字）"
								id="username"
							/>
							<p id="user"><span></span>请输入6~20位用户名</p>
						</div>
						<div class="un">
							<input
								type="text"
								class="on"
								placeholder="请输入手机号码"
								id="phonenumber"
							/>
							<p id="phone"><span></span>请输入11位手机号码</p>
						</div>
						<div id="register-code">
							<input
								type="text"
								class="on-list"
								placeholder="请输入手机短信验证码"
								id="phonecode"
							/>
							<button id="code">获取验证码</button>
						</div>
						<div class="un">
							<input
								type="text"
								class="on"
								placeholder="请输入6至12位的密码"
								id="password"
							/>
							<p id="pwd"><span></span>请输入6~12位密码</p>
						</div>
						<p class="reding">
							<input type="checkbox" class="reding-left" />
							<span class="redi">我已阅读并接受</span
							><span> <a href="">《源码用户服务协议》</a> </span
							><span> <a href="">《源码隐私政策》</a> </span>
						</p>
						<p class="snake-btn">
							<span></span>
							<span></span>
							<span></span>
							<span></span>
							<button class="register">立即注册</button>
						</p>
					</form>
				</div>
			</div>
		</main>
		<!-- 1.引入util的js -->
		<script src="../js/util.js"></script>
		<!-- 2.引入当前页的js -->
		<script src="../js/register.js"></script>
	</body>
</html>
